import React,{useState} from 'react'
import { Card,Button,Steps,Spin } from 'antd';
import { UndoOutlined } from '@ant-design/icons';

const { Step }=Steps

export default function TaskCard(props) {

  const {task}=props
  
  const [loading, setLoading] = useState(false);

  const update=()=>{
    setLoading(true)
    setTimeout(()=>{
      setLoading(false)
    },1000)
  }

  const extra=<Button type='link' onClick={()=>update()}><UndoOutlined /></Button>

  return (
    <div className='home-task-card'>
      <Card title='任务' extra={extra}>
        <Spin spinning={loading}>
          <Steps progressDot current={task.current} direction="vertical" size='small'>
            {
              task.data.map(i=>{
                return <Step key={i.key} title={i.title} description={i.desc.map((p,index)=><p key={'p_'+p+index}>{p}</p>)} />
              })
            }
          </Steps>
        </Spin>
      </Card>
    </div>
    
  )
}
